<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>练习案例</title>
    <style>
      .user {
        font-size: 25px;
      }
      .content {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>

    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      const list = [
        {
          id: 1,
          name: "jack",
          content: "rose, you jump i jump",
          time: "03:21",
        },
        {
          id: 2,
          name: "rose",
          content: "jack, you see you, one day day",
          time: "03:22",
        },
        { id: 3, name: "tom", content: "jack,。。。。。", time: "03:23" },
      ];

      const element = (
        <ul>
          {list.map((item, index) => {
            if (item.content) {
              return (
                <li key={item.id}>
                  <h3 className="user">用户:{item.name}</h3>
                  <p
                    className="content"
                    onClick={(event) => {
                      alert(item.time);
                    }}
                  >
                    {item.content}
                  </p>
                </li>
              );
            } else {
              return <h1>暂无内容</h1>;
            }
          })}
        </ul>
      );

      ReactDOM.createRoot(document.getElementById("root")).render(element);
    </script>
  </body>
</html>
